<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${c.bChaptername}"></title>
    <link rel="icon" href="../../img/logoimg.png" type="image/ico">
    <style>
        .fix{
            position: fixed;
            /*position:fixed;*/
        }
        .spanFont{
            font-size: medium;
            font-weight: bold;
            color: black;
        }
    </style>
</head>
<script type="application/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<body>
<!-- 章节信息展示-->
    <div style="text-align: center;font-size: 14px;color: #5e5e5e;">
        <h1 style="color: black" th:text="${c.bChaptername}"></h1>
        书名：<span class="spanFont" th:text="${b.blName}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        作者：<span class="spanFont" th:text="${b.author.aName}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        本章字数：<span class="spanFont" th:text="${c.bNum}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        更新时间：<span class="spanFont" th:text="${b.newDate}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
        <br><br><br><br>
        <hr style="display:inline-block;width: 80%;color: #e5e3e3;">
    </div>
    <div class="fix" style="margin-left: 2%;margin-top: -14%">
        <a href="/moyue" style="text-decoration: none;font-size:18px;margin-left:3px;color:#9E9E9E;">
            <h2 style="color: #f99e01;">
                <img src="../../img/logoBlack.png" width="150px" height="50px" style="border-radius: 20%;float: left"/>
            </h2>
        </a>
    </div>
    <br><br><br><br><br><br>
    <div class="fix" style="font-size: 16px;margin-top: -14%;width: 150px;margin-left: 2%;background-color: whitesmoke;border-radius: 5px">
        <div>
            <a href="javascript:toSettings()" style="text-align: center;line-height: 0">
                <p style="height: 25px;">
                    <img id="settingsImg" src="../../img/icon/green_pixel_29.gif" width="25px" height="25px">
                </p>
                <p style="height: 10px;">
                    阅读设置
                </p>
            </a>
        </div>
        <div>
            <a href="javascript:toCatalog()" style="text-align: center;line-height: 0">
                <p style="height: 25px;">
                    <img id="catalogImg" src="../../img/icon/green_pixel_26.gif" width="25px" height="25px">
                </p>
                <p style="height: 10px;">
                    目录
                </p>
            </a>
        </div>
        <div>
            <a href="javascript:void(0)" th:onclick="toBack([[${b.blId}]],[[${c.bChapterid}]])" style="text-align: center;line-height: 0">
                <p style="height: 25px;">
                    <img id="backImg" src="../../img/icon/green_pixel_133.gif" width="25px" height="25px">
                </p>
                <p style="height: 10px;">
                    返回
                </p>
            </a>
        </div>
    </div>
    <br>
    <div id="settings" class="fix" style="margin-left: 13%;margin-top: -300px;width: 300px;height: 250px;background-color: whitesmoke;border-radius: 5px;box-shadow: 10px 0px 10px 0px #5e5e5e" hidden>
        <!-- 关闭按钮 -->
        <span id="closeSettings">
            <a href="javascript:closeSettings()" style="float: right;margin: 2px 5px">
                <img src="../../img/icon/green_pixel_117.gif">
            </a>
        </span>
        <!--在body标签开始加入网站标题和控件按钮-->
        <div style="padding: 20px 20px;font-size: 14px;color: #676666">
            <div class="bgc" style="width: 150px;  margin-right: 5px;">
                阅读背景：<button class="btn" style="width: 50px;float:none;">背景</button>
                <div class="bgc-content" style="position: fixed;padding-left: 78px">
                    <a style="background-color:#dae9da;border-radius: 100%;border: 1px black solid;height: 50px" onclick='bgc("#dae9da")'></a>
                    <a style="background-color:#ebcece;border-radius: 100%;border: 1px black solid;height: 50px" onclick='bgc("#ebcece")' ></a>
                    <a style="background-color:#f6f1e7;border-radius: 100%;border: 1px black solid;height: 50px" onclick='bgc("#f6f1e7")'></a>
                    <a style="background-color:#ebddae;border-radius: 100%;border: 1px black solid;height: 50px" onclick='bgc("#ebddae")' ></a>
                    <a style="background-color:#dadada;border-radius: 100%;border: 1px black solid;height: 50px" onclick='bgc("#dadada")' ></a>
                    <a style="background-color:#ffffff;border-radius: 100%;border: 1px black solid;height: 50px" onclick='bgc("#ffffff")' ></a>
                    <a style="background-color:#18222d;border-radius: 100%;border: 1px black solid;height: 50px" onclick='bgc("#18222d")' ></a>
                </div>
            </div><br>
            字体大小：<button class="btn" onclick="zitibianxiao()">A-</button>
            <button class="btn" onclick="zitibianda()">A+</button><br><br>
            字体样式：<button class="btn" id="ziti"  style="width:50px;" onclick="ziti();" >字体</button>
            <button class="btn" onclick="jiacu()">加粗</button><br><br>
            屏幕样式：<button class="btn" style="width:50px;" onclick="return ExecuteFun(this)" >全屏</button>
            <button class="btn" id="pingkuan" style="width:50px;" onclick="pingkuan();" >屏宽</button>
        </div>
    </div>
    <div id="catalog" class="fix" style="margin-left: 13%;margin-top: -300px;width: 800px;background-color: whitesmoke;border-radius: 5px;box-shadow: 10px 0px 10px 0px #5e5e5e" hidden th:include="common/readCatalog"></div>
    <div style="margin: -140px auto;width: 80%;" th:include="common/read"></div>
    <br><br><br><br><br><br><br>
    <div style="width: auto;height: 200px;margin: auto;text-align: center">
        <th:block th:each="i:${#numbers.sequence(0,b.books.size()-1)}" th:if="${c.bChapterid!=b.books.get(0).bChapterid}">
            <button th:if="${b.books.get(i).bChapterid==c.bChapterid}" th:onclick="getCatalog([[${b.books.get(i-1).bChapterid}]])" style="background-color: whitesmoke; width: 100px;height: 40px;text-align: center;line-height: 20px;border: 1px #f99e01 solid;border-radius: 5px;" class="btn preBtn">上一章</button>
        </th:block>
        <th:block th:each="i:${#numbers.sequence(0,b.books.size()-1)}" th:if="${c.bChapterid!=b.books.get(b.books.size()-1).bChapterid}">
            <button th:if="${b.books.get(i).bChapterid==c.bChapterid}" th:onclick="getCatalog([[${b.books.get(i+1).bChapterid}]])" style="background-color: #f99e01; width: 100px;height: 40px;text-align: center;border: none;line-height: 20px;border-radius: 5px;">下一章</button>
        </th:block>
        <br><br><br><br><hr style="display:inline-block;width: 80%;color: #e5e3e3;">
    </div>
    <div id="getComment" th:if="${b.books.get(b.books.size()-1).bChapterid==c.bChapterid&&commentFlag}" style="width: 80%;text-align: center;margin: -50px auto" th:include="common/readComment" ></div>

</body>
<script>
    //显示修改，隐藏目录
    function toSettings() {
        //显示设置内容
        $("#settings").prop("hidden",false)
        //修改图片
        $("#settingsImg").attr("src","../../img/icon/green_pixel_32.gif");
        //修改图片
        $("#catalogImg").attr("src","../../img/icon/green_pixel_26.gif")
        //隐藏目录
        $("#catalog").prop("hidden",true);
    }

    //隐藏目录
    function toCatalog() {
        //显示关闭按钮
        $("#closeCatalog").show();
        //隐藏设置内容
        $("#settings").prop("hidden",true);
        //修改图片
        $("#catalogImg").attr("src","../../img/icon/green_pixel_96.gif");
        //修改图片
        $("#settingsImg").attr("src","../../img/icon/green_pixel_29.gif");
        //显示目录
        $("#catalog").prop("hidden",false);
    }

    //关闭设置
    function closeSettings(){
        //全部隐藏
        $("#settings").prop("hidden",true);
        //修改图片
        $("#settingsImg").attr("src","../../img/icon/green_pixel_29.gif");
    }

    //关闭目录
    function closeCatalog() {
        //全部隐藏
        $("#catalog").prop("hidden",true);
        //修改图片
        $("#catalogImg").attr("src","../../img/icon/green_pixel_26.gif");
    }

    function toBack(blId,cid) {
        //新增历史记录
        addHistory(blId,cid);
        location.href="/book/showBookInfo?blId="+blId;
    }

    //新增历史记录
    function addHistory(bid,cid) {
        location.href="/book/addHistory?bid="+bid+"&cid="+cid;
    }

    function getCatalog(cid){
        location.href="/book/queryChapterById?bcid="+cid;
    }
</script>
</html>